<template>
  <div class="picture-mark-comp">
    <div class="item">
      <el-input
        placeholder="X"
        :value="location.x"
        @input="(val) => handleChange('x', val)">
      </el-input>
      <el-input
        placeholder="Y"
        :value="location.y"
        @input="(val) => handleChange('y', val)">
      </el-input>
    </div>
    <div class="item" v-if="$slots.default">
      <slot></slot>
    </div>
    <i class="iconfont iconditudingweidian-xuanzhong" @click="visible = true"></i>
    <el-dialog
      custom-class="add-picture-mark-comp"
      title="图片标签设置"
      :close-on-click-modal="false"
      append-to-body
      :visible="visible"
      :width="$setRem(1400)"
      :before-close="handleCancel">
      <div class="content">
        <img class="img" :src="img" alt="" @click="handleClick">
        <div v-show="locationInfo" class="tooltip" :style="{left: evtX + 10 + 'px', top: evtY - 30 + 'px'}">
          <p>X: {{ locationInfo && locationInfo.x }}</p>
          <p>Y: {{ locationInfo && locationInfo.y }}</p>
        </div>
      </div>
      <span class="dialog-footer">
      <el-button type="primary" @click="handleCancel">取 消</el-button>
      <el-button
        class="success"
        type="primary"
        @click="hanldeSave">
        保 存
      </el-button>
    </span>
    </el-dialog>
  </div>
</template>

<script>

export default {
  model: {
    prop: 'value',
    event: 'change'
  },
  props: {
    // 定位信息
    value: {
      type: Object,
      default: null
    },
    projectId: {
      type: String,
      default: ''
    },
    img: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      visible: false,
      evtX: '',
      evtY: '',
      rootWidth: '',
      rootHeight: '',
      locationInfo: null,
      location: {
        x: '',
        y: ''
      },
    };
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler: function (data) {
        data && Object.keys(this.location).forEach(key => {
          this.location[key] = data[key] || '';
        });
      }
    },
    visible(val) {
      if (val) {
        this.$nextTick(() => {
          const ele = document.querySelector('.add-picture-mark-comp .content');
          if (!ele) return;
          this.rootWidth = ele.offsetWidth;
          this.rootHeight = ele.offsetHeight;
          const { x, y } = this.value;
          this.locationInfo = this.value ? { ...this.value } : null;
          this.evtX = x ? this.rootWidth * x : '';
          this.evtY = y ? this.rootHeight * y : '';
        });
        return;
      }
      this.evtX = this.evtY = '';
      this.locationInfo = null;
    }
  },
  methods: {
    handleClick(e) {
      this.locationInfo = {
        x: parseFloat((e.offsetX / this.rootWidth).toFixed(2)),
        y: parseFloat((e.offsetY / this.rootHeight).toFixed(2))
      };
      this.evtX = e.offsetX;
      this.evtY = e.offsetY;
    },
    handleChange(key, value, hasEmit = true) {
      this.location = {
        ...this.location,
        [key]: value
      };
      hasEmit && this.handleEmit();
    },
    /**
     * emit当前值
     */
    handleEmit() {
      if (this.locationInfo) this.location = { ...this.locationInfo };
      this.$emit('change', this.location);
      this.handleCancel();
    },
    // 保存
    hanldeSave() {
      this.handleEmit();
    },
    // 取消
    handleCancel() {
      this.visible = false;
    }
  }
};
</script>

<style scoped lang="scss">
  @import '../../../assets/styles/dialog';
  .picture-mark-comp {
    width: 100%;
    height: 100%;
    color: #fff;
    position: relative;
    /deep/ .el-input {
      width: 110px;
      margin-right: 5px;
    }
    .iconfont {
      position: absolute;
      right: -5px;
      bottom: 0;
      &:hover {
        cursor: pointer;
        color: $lightBtnBg;
      }
    }
    > .item {
      width: 95%;
      display: flex;
      justify-content: space-between;
      align-items: center;
    }
  }
  .add-picture-mark-comp {
    .content {
      width: 100%;
      position: relative;
      .tooltip {
        position: absolute;
        background: rgba(0, 0, 0, .6);
        width: 100px;
        height: 50px;
        padding: 3px 20px;
        border-radius: 8px;
        text-align: center;
        transition: all .2s;
        &::before {
          position: absolute;
          top: calc(50% - 10px);
          left: -24px;
          display: block;
          content: '';
          border-width: 12px;
          border-color: transparent rgba(0, 0, 0, .6) transparent transparent;
          border-style: solid;
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .dialog-footer {
      display: flex;
      justify-content: center;
      margin: 10px 0;
    }
  }
</style>
